<template>
  <div v-if="data.points && Object.keys(data.points).length > 0">
    <!-- 图标点 -->
    <template v-if="data.airspaceShapeType === 8">
      <vc-entity
        :name="data.airspaceName"
        :description="data.airspaceName"
        @click="handleOpen"
        :position="getPointPosition(data.points)"
      >
        <vc-graphics-billboard
          :width="50"
          :height="78"
          :show="true"
          :scale="0.25"
          image="/marker.png"
        ></vc-graphics-billboard>
      </vc-entity>
    </template>
    <!-- 点 -->
    <template v-if="data.airspaceShapeType === 9">
      <vc-entity
        :name="data.airspaceName"
        :description="data.airspaceName"
        @click="handleOpen"
        :position="getPointPosition(data.points)"
      >
        <vc-graphics-point
          :color="data.airspaceColor"
          :pixel-size="10"
        ></vc-graphics-point>
      </vc-entity>
    </template>
    <!-- 线 -->
    <template v-if="data.airspaceShapeType === 10">
      <vc-entity
        :name="data.airspaceName"
        :description="data.airspaceName"
        @click="handleOpen"
      >
        <vc-graphics-polyline
          :positions="getPolylinePosition(data.points)"
          :material="data.airspaceColor"
          :width="5"
          :clampToGround="false"
        ></vc-graphics-polyline>
      </vc-entity>
    </template>
    <!-- 矩形 -->
    <template v-if="data.airspaceShapeType === 12">
      <vc-entity
        :name="data.airspaceName"
        :description="data.airspaceName"
        @click="handleOpen"
      >
        <vc-graphics-rectangle
          :coordinates="getRectanglePosition(data.points)"
          :material="data.airspaceColor"
          :height="data.height"
          :extrudedHeight="30"
          :outline="true"
          :outlineColor="data.airspaceColor"
        ></vc-graphics-rectangle>
      </vc-entity>
    </template>
    <!-- 面、正多边形 -->
    <template
      v-if="
        data.airspaceShapeType === 11 ||
        data.airspaceShapeType === 13 ||
        data.airspaceShapeType === 14
      "
    >
      <vc-entity
        :name="data.airspaceName"
        :description="data.airspaceName"
        @click="handleOpen"
      >
        <vc-graphics-polygon
          :hierarchy="getPolygonPosition(data.points)"
          :material="data.airspaceColor"
          :height="data.height"
          :extrudedHeight="30"
          :outline="true"
          :outlineColor="data.airspaceColor"
        ></vc-graphics-polygon>
      </vc-entity>
    </template>

    <el-drawer
      v-model="visible"
      title="空域详情"
      :size="500"
      class="airspace-drawer"
    >
      <el-form :model="data" :label-position="'right'" label-width="180px">
        <el-form-item label="空域名称">
          {{ data.airspaceName }}
        </el-form-item>
        <el-form-item label="空域类型">
          {{ data.airspaceTypeName }}
        </el-form-item>
        <el-form-item label="空域形状">
          {{ data.airspaceShapeTypeName }}
        </el-form-item>
        <el-form-item label="空域高度">
          {{ data.height }}
        </el-form-item>
        <el-form-item label="流量(架次/15min)">
          {{ data.flowRate }}
        </el-form-item>
        <el-form-item label="容量(架次/15min)">
          {{ data.capacity }}
        </el-form-item>
        <el-form-item label="飞行规则">
          {{ data.flyRules }}
        </el-form-item>
        <el-form-item label="风速(m/s)">
          {{ data.windVelocity }}
        </el-form-item>
        <el-form-item label="人口密度(人/平方公里)">
          {{ data.populationDensity }}
        </el-form-item>
        <el-form-item label="飞行风险">
          {{ data.flyRisk }}
        </el-form-item>
        <el-form-item label="拥挤程度">
          {{ data.crowDegree }}
        </el-form-item>
        <el-form-item label="无人机类型">
          {{ data.uavType }}
        </el-form-item>
        <el-form-item label="作业类型">
          {{ data.flyType }}
        </el-form-item>
        <el-form-item label="空域网联环境">
          {{ data.connectEnv }}
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-popconfirm title="确定要删除么?" @confirm="handleDelete">
            <template #reference>
              <el-button>删除</el-button>
            </template>
          </el-popconfirm>
          <el-button type="primary" @click="handleClose">确定</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, toRefs } from "vue";
import {
  VcEntity,
  VcGraphicsRectangle,
  VcGraphicsPolygon,
  VcGraphicsPoint,
  VcGraphicsBillboard,
} from "vue-cesium";
import { ElMessage } from "element-plus";
import api from "@/api";

const emits = defineEmits(["change"]);

const props = defineProps({
  data: Object,
});

const { data } = toRefs(props);

const visible = ref(false);

const getPointPosition = (points) => {
  return [points.longitude, points.latitude, data.height];
};

const getPolylinePosition = (points) => {
  return points.map((point) => {
    return {
      lng: point.longitude,
      lat: point.latitude,
      height: data.height,
    };
  });
};

const getPolygonPosition = (points) => {
  return points.map((point) => {
    return {
      lng: point.longitude,
      lat: point.latitude,
    };
  });
};

// 删除空域
const handleDelete = async () => {
  const result = await api.removeAirSpace(data.value.id);
  if (result.code === 200) {
    ElMessage.success({
      message: result.msg || "删除成功",
      onClose: () => {
        visible.value = false;
        emits("change", "remove", data.value);
      },
    });
  } else {
    ElMessage.error(result.msg || "服务器忙，请稍后重试！");
  }
};

// 打开弹出框
const handleOpen = (e) => {
  visible.value = true;
};

// 关闭弹出框
const handleClose = () => {
  visible.value = false;
};

const getRectanglePosition = (coordinates) => {
  // 初始化矩形的边界值
  let west = Number.POSITIVE_INFINITY;
  let south = Number.POSITIVE_INFINITY;
  let east = Number.NEGATIVE_INFINITY;
  let north = Number.NEGATIVE_INFINITY;

  // 计算经纬度数组的边界框
  coordinates.forEach((coord) => {
    if (coord.longitude < west) west = coord.longitude;
    if (coord.longitude > east) east = coord.longitude;
    if (coord.latitude < south) south = coord.latitude;
    if (coord.latitude > north) north = coord.latitude;
  });
  return { west, south, east, north };
};
</script>

<style scoped></style>
